<template>
	<view class="uni-list">
		<checkbox-group>
			<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
				<view class="blogger-list">
					<img :src="item.avatar" alt="" class='blogger-avatar'>
					<view class="blogger-info">
						<p class='blogger-name'>{{item.name}}</p>
						<p class='has-fans'>粉丝：{{item.num}}</p>
					</view>
					<view>
						<checkbox :value="item.value" :checked="item.checked" class='setCheck' />
					</view>
				</view>


			</label>
		</checkbox-group>
		<view class="submit-box">
			<button @click="submit" class="submitInfo">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						name: '法外狂徒张三', //达人名字
						num: '1000W', //粉丝量
						avatar: 'https://cdn.uviewui.com/uview/album/1.jpg' //达人头像
					},
					{
						name: '金钱豹',
						num: '1亿',
						avatar: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
				]
			};
		}
	}
</script>

<style lang="stylus">
	.blogger-list {
		background-color #FFFFFF;
		margin 10px 10px;
		padding 10px 10px;
		border-radius 20upx;
		position relative;
		overflow hidden
	}

	.blogger-avatar {
		width 45px;
		height 45px;
		border-radius 50%;
		display inline-block;
		float left;

	}

	.blogger-info {
		display inline-block;
		float left;
		margin-left 8px;
	}

	.blogger-name {
		font-size 14px;
		color #000000;
	}

	.has-fans {
		font-size 12px;
		color #999999;
	}

	/deep/.setCheck {
		position absolute;
		top 40upx;
		right 20px;
	}

	.submitInfo {
		width 280px;
		border-radius 40upx;
		color #FFFFFF;
		background-color #2852FE;
		margin-top 260rpx;
		position fixed;
		bottom 140px;
		margin:auto;
		left:0;
		right:0;
			
	}

	// 选择器样式
</style>
